<template>
   <div>
    <div class="account-pages"></div>
    <div class="clearfix"></div>
    <div class="wrapper-page">
      <div class="text-center">
        <a href="/" class="logo">
          <span>
            Tao
            <span>Yun</span>
          </span>
        </a>
      </div>
      <div class="m-t-40 card-box">
        <div class="text-center">
          <h4 class="text-uppercase font-bold m-b-0">修改个人信息</h4>
        </div>
        <div class="panel-body">
          <div class="form-horizontal m-t-20">
            <div class="form-group">
              <div class="col-xs-12">
              账号(工号)：
                <input
                  class="form-control"
                  v-model="user.userNumber"
                  type="text"
                  placeholder="User_Number"
                  disabled
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              密码：
                <el-button type="primary" style="width:350px"  @click="jump_to_forget()"  round>点击此处修改密码</el-button>
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              姓名：
                <input
                  class="form-control"
                  v-model="user.name"
                  type="text"
                  placeholder="Name"
                  disabled
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              性别：
                <input
                  class="form-control"
                  v-model="user.sex"
                  type="text"
                  placeholder="Sex"
                  disabled
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
                手机号码：
                <input
                  class="form-control"
                  v-model="user.phoneNumber"
                  type="text"
                  required
                  placeholder="PhoneNumber"
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              邮箱：
                <input
                  class="form-control"
                  v-model="user.email"
                  type="text"
                  required
                  placeholder="Email"
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              所属部门：
                <input
                  class="form-control"
                  v-model="user.department"
                  type="text"
                  placeholder="Department"
                  disabled
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              所属权限组：
                <input
                  class="form-control"
                  v-model="user.permission"
                  type="text"
                  placeholder="Permission"
                  disabled
                >
              </div>
            </div>

            <div class="form-group">
              <div class="col-xs-12">
              账号状态：
                <input
                  class="form-control"
                  v-model="user.state"
                  type="text"
                  placeholder="State"
                  disabled
                >
              </div>
            </div>


            <div class="form-group text-center m-t-30">
              <div class="col-xs-12">
                <button
                  class="btn btn-custom btn-bordred btn-block waves-effect waves-light"
                  @click="changeUserInfo()"
                >修改</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end card-box-->
    </div>
    <!-- end wrapper page -->
  </div>
</template>

<script>
   export default {
       data() {
           return {
             user:{
                userNumber:'',
                name:'',
                sex:'',
                phoneNumber:'',
                email:'',
                department:"",
                permission:"",
                state:"",
                userId:'',
               }
           };
       },
       methods: {
           jump_to_forget(){
               this.$router.push({path:'forget'})
           },
           open_error(mes) {
                this.$notify.error({
                    title: "错误",
                    message: mes,
                    position: "bottom-right",
                    duration:3000
                });
            },
            open_success(mes) {
                this.$notify.success({
                    title: "成功",
                    message: mes,
                    position: "bottom-right"
                });
            },

             // 检测到token失效，跳转到登录页
            jump_to_login(){
                this.open_error("认证已经过期，已自动跳转到登录页面");
                this.$router.push({path:"/signin"});
            },

            // 注销  
            logOut(){        
                this.$axios.post('/api/taoyun/v1/logout')
                .then((res) => {
                    if(res.data.code=="200"){
                        this.$router.push({path:'/signin'});
                    }
                    else{
                        this.open_error("退出登录失败，请稍后重试！");
                    }
                })
                .catch((err) => {
                    if(err.response){
                        this.open_error("服务器宕机了...请稍后再试。")
                    }
                });
            },

            // 拿数据有延迟
           getUserInfo(){
               // 从浏览器缓存拿token到vuex  防止刷新浏览器就丢失token
                this.$store.commit("set_token", window.localStorage.getItem("tokenLogin"));
                this.$axios.get('/api/taoyun/v1/getUser')
                .then((res) => {
                    if(res.data.code=="200"){
                        let userInfo=res.data.data;
                        this.user.department=userInfo.department;
                        this.user.email=userInfo.email;
                        this.user.permission=userInfo.permission;
                        this.user.phoneNumber=userInfo.phoneNumber;
                        this.user.sex=userInfo.sex;
                        this.user.state=userInfo.state;
                        this.user.userNumber=userInfo.userNumber;
                        this.user.name=userInfo.name;
                        this.user.userId=userInfo.userId;
                    }
                    else if(res.data.code=="500"){
                        this.jump_to_login();
                    }
                })
                .catch((err) => {
                    this.jump_to_login();
                });
            },
            changeUserInfo(){
                let user = JSON.stringify(this.user);

                this.$axios.post('/api/taoyun/v1/User/ModifyInformation',user)
                .then((res) => {
                   if(res.data.code=="200"){
                       this.open_success(res.data.msg+'，请重新登录！');
                        this.logOut();
                   }
                   else{
                       this.open_error(res.data.msg);
                   }
                })
                .catch((err) => {
                   if(err.response){
                       this.open_error("服务器宕机了...请稍后再试。");
                   }
                });
            },
       },
       created() {
           this.getUserInfo();
       },
   }
</script>

<style scoped>

</style>
